<template>
  <div>
    <el-table :data="skus" border style="width: 100%">
      <el-table-column prop="SkuName" label="商品名称"> </el-table-column>
      <el-table-column prop="Price" label="价格"> </el-table-column>
      <el-table-column prop="Num" label="库存"> </el-table-column>
      <!-- <el-table-column prop="AlterNum" label="预警库存"></el-table-column> -->
      <el-table-column
        v-for="(spec, index) in specs"
        :key="spec.name"
        :label="spec.name"
      >
        <template slot-scope="scope">
          {{ scope.row.Spec | SpecName(index) }}
        </template>
      </el-table-column>
      <el-table-column title="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="update(scope.row.Id)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="updateVisible" append-to-body>
      <sku-update v-if="updateVisible" :id="Id" @close="()=>{updateVisible=false;getData()}"></sku-update>
    </el-dialog>
  </div>
</template>

<script>
import SkuApi from "@/api/SkuApi.js";
import SpuApi from "@/api/SpuApi.js";
import SkuUpdate from './SkuUpdate';

export default {
  data() {
    return {
      Id:0,
      skus: [],
      specs: [],
      updateVisible:false
    };
  },
  props: ["spuId"],
  components:{
    SkuUpdate
  },
  methods: {
    getData() {
      SpuApi.getById(this.spuId).then((res) => {
        this.specs = JSON.parse(res.data.SpecItems);
        console.log(this.specs);
      });
      SkuApi.getBySpuId(this.spuId).then((res) => {
        this.skus = res.data;
      });
    },

    update(id) {
      this.Id = id;
      this.updateVisible = true;
    },
  },
  filters: {
    SpecName(spec, index) {
      let specItem = spec.split(',');
      return specItem[index];
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style>
</style>